<template>
  <div>

    <el-dialog :title="'积分明细【' + user.full_name + '_' + user.phone + '】'" :visible.sync="dialogVisible" width="60%">
      

      <el-table :data="detailList" stripe border style="width: 100%" class="nc-table-btn-ctrl">
        
        <el-table-column 
          type="index"
          :index="indexMethod">
        </el-table-column>

        <el-table-column prop="descs" label="变化说明" ></el-table-column>
        <el-table-column label="变动积分" >
          <template slot-scope="scope">
            <span class="text-bold color-danger">{{scope.row.money > 0 ? '+' : ''}}{{scope.row.money}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="money_before" label="变动前" ></el-table-column>
        <el-table-column prop="money_after" label="变动后" ></el-table-column>
        <el-table-column prop="create_time_str" label="变动时间" ></el-table-column>
        <el-table-column
          label="状态" >
          <template slot-scope="scope">
            <span v-if="scope.row.is_valid == 1" class="color-success text-bold">正常</span>
            <span v-if="scope.row.is_valid == 0" class="color-danger text-bold">异常</span>
          </template>  
        </el-table-column>
      </el-table>


      <div class="pager-bar-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="page.totalRow"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          @current-change="pageNumChange"
          @prev-click="pageNumChange"
          @next-click="pageNumChange"
          @size-change="pageSizeChange"
          >
        </el-pagination>
      </div>

    </el-dialog>

  </div>
  
</template>


<script>

  import CommissionApi from '../../api/CommissionApi'

  import SubmitButton from '../common/SubmitButton'


  export default {
    components: {
      SubmitButton
    },
    data(){
      return {

        page: {
          keyWord: '',
          changeType: 0,

          userId: 0,
          pageNum: 1,
          pageSize: 10
        },

        detailList: [],

        user: {},
      }
    },
    props: ['isShow', 'userInfoFun'],
    computed: {
      dialogVisible: {
        get: function(){
          return this.isShow;
        },
        set: function(newValue){
          this.closeEdit(false);
        }
      }
    },
    created(){
      
    },
    watch: {
      dialogVisible: function(newVal, oldVal){
        if (newVal) {
          this.user = this.userInfoFun();
          this.page.userId = this.user.user_id;
          CommissionApi.detailList(this.page, json => {
            this.detailList = json.list;

            this.setPage(json);
          });
          
        }
      }
    },
    methods: {
      searchCB(json){
        this.balanceList = json.list;
        this.setPage(json);
      },
      getPage(){
        CommissionApi.detailList(this.page, json=>{
          this.detailList = json.list;
          this.setPage(json);
        });
      },
      pageNumChange(pageNum){
        this.page.pageNum = pageNum;
        this.getPage();
      },
      pageSizeChange(pageSize){
        this.page.pageSize = pageSize;
        this.getPage();
      },
      setPage(json){
        this.page.pageNum = json.pageNum;
        this.page.pageSize = json.pageSize;
        this.page.totalRow = json.totalRow;
      },
      indexMethod(index){
        return index + 1 + (this.page.pageNum - 1) * this.page.pageSize
      },
      closeEdit(isSuccess){
        this.$root.eventHub.$emit('closeDetailListDialog', isSuccess);
      },

    }
  }
</script>

